<template>
	<view class="">
		<view class="bgIndex ">
			
			<liu-slide-img :heightNumber="730" :list="listPoster" :autoplay="autoplay" :interval="interval"
				@click="clickSlideImg"></liu-slide-img>
            <view class="masked">
            
            </view>
			<view class="tape flex" @click.stop="palyAudioFn(serviceDetails.describe_speech)">
				<image v-if="!isPaly" class="playerImg" :src="suspend" mode=""></image>
				<image v-else class="playerImg" src="../../static/组合 1574.png" mode=""></image>
			
				<view class="audio">
					<view :class="isPaly?'wave':'waveOne'"></view>
					<view :class="isPaly?'wave':'waveOne'"></view>
					<view :class="isPaly?'wave':'waveOne'"></view>
					<view :class="isPaly?'wave':'waveOne'"></view>
					<view :class="isPaly?'wave':'waveOne'"></view>
					<view :class="isPaly?'wave':'waveOne'"></view>
				</view>
				<text class="">
					{{duration?duration:'-'}}s
				</text>
			</view>
            <view class="topLocation" @click="NavBackFn()">
            	 <view :style="{ height: (heightSystemss*2)+25 + 'rpx' }" style="position: sticky;"></view>
				 
            	<uni-icons  type="left" size="30"></uni-icons>
            </view>
			<view class="flex-between bottomLocation">

				<view class="flex-start-center margin-left_20rpx">
					<image class="img" :src="userInfoObject.avatar" mode=""></image>
					<view class="margin-left_10rpx">
						<view class="font-weight " style="color: #fff;margin-bottom: 10rpx;">
							{{userInfoObject.nickname}}
						</view>
						<view class="flex">
							<text
								style="margin-right: 10rpx;color: #fff;">已服务：{{userInfoObject.service_number}}个订单</text>
                            <view v-if="userInfoObject.sex==1" class="boyBtn flex">
                            	<image class="genderImg" :src="nanicon" mode=""></image>
                            	<text >{{userInfoObject.age}}</text>
                            </view>
							<view class="genderBtn flex" v-if="userInfoObject.sex==2">
								<image class="genderImg" :src="womenticon" mode=""></image>
								<text >{{userInfoObject.age}}</text>
							</view>
							

						</view>
					</view>
				</view>
				<!-- <view class="followBtn flex" v-if="!isHost">
					关注
				</view> -->
				<view v-if="!isHost" :class="userInfoObject.is_follow==0?'followBtn flex':'NowFollowBtn flex'"
					@click="followUserFn(userInfoObject.id,userInfoObject.is_follow)">
					{{userInfoObject.is_follow==0? '关注':'已关注'}}
				</view>

			</view>

		</view>
		<view class="serviceDetails">
	<!-- 		<rich-parser :html="serviceDetails.describe" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la"
				lazy-load ref="article" selectable show-with-animation use-anchor lazyLoad="true"></rich-parser> -->
            <uv-parse :content="serviceDetails.describe" :selectable="true"></uv-parse>

			<view class="" style="color: #3853FF;" @click="addressFn(serviceDetails)">
				{{serviceDetails.address}}<uni-icons color="#3853FF" type="right" size="15"></uni-icons>
			</view>
			<!-- <view class="font-weight"> 
				王者陪玩双区有号
			</view>
			<view class="padding_20rpx_0">
				<text>
					至尊星耀
					游戏大区：QQ区 微信区
					擅长位置：中路 游走
					擅长英雄：小乔 貂蝉
				</text>
			</view>
			<view class="">
				<image class="achievementsImg" src="../../static/第一行所有图标/矩形 1911.png" mode=""></image>
			</view> -->
			<!-- 用户评价 -->
			<view class="flex-between margin-top_20rpx margin-bottom_20rpx">
				<view class="flex-align-center">

					<view class="font-weight">
						用户评价
					</view>
				</view>
				<view style="color: #999;" @click="viewMoreEvaluationsFn(serviceDetails)">
					<text>服务过 {{userInfoObject.service_number}}个订单，查看全部评价</text>
					<uni-icons color="#999" type="right" size="15"></uni-icons>
				</view>
			</view>
			<!-- 评价等级 -->
			<view class="evaluateStars flex-around" v-if="serviceDetails&&serviceDetails.technology_score_total">
				<view class="">
					<view class="font-size_56rpx font-weight margin-bottom_10rpx">
						{{scoreStatusTotalsFn(Number(serviceDetails.technology_score_total),Number(serviceDetails.service_score_total),Number(serviceDetails.voice_score_total))}}
					</view>
					<view class="" style="color: rgb(151, 151, 151);">
						共{{serviceDetails.comment_number}}条评价
					</view>
				</view>
				<view class="line">

				</view>
				<view class="" style="color: rgb(151, 151, 151) ;">

					<view class="flex ">
						技术：<uni-rate :readonly="true" v-model="technology_score" @change="onChange" />{{scoreStatusTotalFn(Number(serviceDetails.technology_score_total),serviceDetails.comment_number,'technology_score')}}
					</view>
					<view class="flex">
						服务：<uni-rate :readonly="true" v-model="service_score" @change="onChange" />{{scoreStatusTotalFn(Number(serviceDetails.service_score_total),serviceDetails.comment_number,'service_score')}}
					</view>
					<view class="flex">
						声音：<uni-rate :readonly="true" v-model="voice_score" @change="onChange" />{{scoreStatusTotalFn(Number(serviceDetails.voice_score_total),serviceDetails.comment_number,'voice_score')}}
					</view>
				</view>
			</view>
			<!-- 评价列表 -->
			<view class="evaluateList" v-for="(item,index) in serviceCommentList" :key="index">
				<view class="">
					<view class="flex-start-center">
						<image class="img" :src="item.avatar" mode=""></image>
						<view class="margin-left_10rpx">
							<view class="font-weight " style="margin-bottom: 10rpx;">
								{{item.nickname}} {{scoreStatusFn(Number(item.technology_score),Number(item.service_score),Number(item.voice_score))}}
							</view>
							<view class="flex" >

								<uni-rate
									v-model="averageScore"
									:readonly="true" @change="onChange" />
								<view style="color: rgb(151, 151, 151);margin-left: 15rpx;">技术:{{item.technology_score}}
									服务:{{item.service_score}} 声音:{{item.voice_score}}</view>


							</view>
						</view>
					</view>
					<view class="detailsText">
						<view class="">
							{{item.evaluate}}
						</view>
						<view  class="" @click.stop="imgScare(item.evaluate_img)">
							<image class="evaluateImg"  :src="item.evaluate_img" mode=""></image>
						</view>
					</view>
					
				</view>
			</view>

			<view v-if="!isHost" style="height: 100rpx;">

			</view>

			<view v-if="!isHost&&!showorderBtn" class="addTieziBtn flex" @click="serviceItemsFn(serviceDetails.id)">
				立即下单：{{serviceDetails.price}}{{currency_name}}
			</view>
		</view>
		<!-- 领取优惠券 -->
		<sunui-popup ref="serviceItemsPopup">
			<template v-slot:content>

				<view class="serviceItemsContain flex-column-Jstart">

					<view class="top flex-between">
						<view class="">

						</view>
						<text>服务项目</text>
						<uni-icons @click='closeWriteOffIcon' class="uniIcon" type="clear" size="30"
							style="color: #07070791;">
						</uni-icons>
					</view>
					<view class="servicePersonnel" style="">

						<view class="flex-start-center">
							<!-- <image class="img" src="../../static/第一行所有图标/矩形 141.png" mode=""></image> -->
							<view class="  margin-left_16rpx">
								<view class="font-weight " style="margin-bottom: 10rpx;">
									干饭王
								</view>

								<view class="flex">
									<view class="flex-start-center margin-right_16rpx">
										<view class="point">

										</view>
										<text>在线</text>
									</view>
									<view class="genderBtn flex">
										<image class="genderImg" :src="womenticon" mode=""></image>
										<text style="margin-bottom: 6rpx;">18</text>
									</view>
									<view class="goldBtn flex">
										<image class="goldImg" :src="gold" mode=""></image>
										<text>黄金</text>
									</view>
								</view>


							</view>
						</view>
					</view>

					<view class="servicePersonnel">

						<view class="flex-between">
							<!-- <image class="img" src="../../static/第一行所有图标/矩形 141.png" mode=""></image> -->
							<view class="  margin-left_16rpx">
								<view class="font-weight " style="margin-bottom: 20rpx;">
									王者荣耀
								</view>

								<view class="flex" style="color: #666666;">
									<view class="flex-start-center margin-right_16rpx">

										<text>开黑</text>
									</view>
									<view class="flex-start-center margin-right_16rpx">

										<text>开黑41次 15{{currency_name}}/30分钟</text>
									</view>

								</view>


							</view>
							<view class="switchingServices flex">
								<text>切换服务</text>
								<uni-icons type="down" color="#666666" size="15"></uni-icons>
							</view>
						</view>

						<view class="flex-between margin-top_30rpx">
							<view class="">
								服务数量
							</view>
							<view style="width: 40%; ">
								<numSelect min="0" max="1000" model="4" color="#D6D6D6"></numSelect>
							</view>


						</view>
					</view>
					<view class="servicePersonnel">

						<view class="flex-between">
							<view class="flex-start-center">
								<!-- <image class="img" src="../../static/第一行所有图标/矩形 141.png" mode=""></image> -->
								<view class="  margin-left_16rpx">
									<view class="font-weight " style="margin-bottom: 20rpx;">
										{{currency_name}}
									</view>

									<view class="flex" style="color: #666666;">

										<view class="flex-start-center margin-right_16rpx">

											<text>余额:3（余额不足）</text>
										</view>

									</view>


								</view>
							</view>
							<view class=" flex" style="color:#7E5CFF">
								<text>立即充值</text>
								<uni-icons type="right" color="#7E5CFF" size="15"></uni-icons>
							</view>
						</view>


					</view>
					<view class="makeAppointment flex-around">
						<view class="">
							<text>实付{{currency_name}}</text> <text style="font-size: 27rpx;color: rgb(126, 92, 255);"
								class="font-weight">13币</text>

						</view>
						<view class="makeAppointmentBtn flex">
							立即预约
						</view>
					</view>
				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	import numSelect from '../../components/poiuy-numSelect/numSelect.vue'
	export default {
		components: {
			numSelect
		},
		data() {
			return {
				currency_name:uni.getStorageSync('system').currency_name,
				nanicon:this.$img.nanicon,
				suspend:this.$img.suspend,
				womenticon:this.$img.womenticon,
				gold:this.$img.gold,
				rateValue: 5,
				serviceDetails: null,
				userInfo: uni.getStorageSync("userInfo"),
				isHost: false,
				autoplay: true,
				interval: 3000,
				tabIndex: 0,
				technology_score:'',
				service_score:"",
				voice_score:'',
				heightSystemss:0,
				isPaly:false,
				listPoster: [{

					img: 'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-11/1b5f0202406111537307450.png'
				}],
				userInfoObject: null,
				serviceCommentList: [],
				averageScore:'',
				serviceId:'',
				showorderBtn:false,
				duration:''


			}
		},
		// computed: {



		// },
		computed: {
			// scoreStatusFn: function() {
			// 	let technology_score = Number(this.item.technology_score);
			// 	let service_score = Number(this.item.service_score);
			// 	let voice_score = Number(this.item.voice_score);

			// 	return Math.floor((technology_score + service_score + voice_score) / 3).toFixed(2);
			// }
			scoreStatusFn() {
				return function(technology_score, service_score, voice_score) {
			                 let  score
						
					score = (((technology_score + service_score + voice_score) / 3).toFixed(2))
					console.log(score)
                   this.averageScore=score

					return ''


				}
			},
			scoreStatusTotalFn() {
				return function(scoreTotal, commentNumber,name) {
			         let  score
						
					score = ((scoreTotal / commentNumber).toFixed(2))
					console.log(score)
					if(name=='technology_score'){
						this.technology_score=score
					}else if(name=='service_score'){
						this.service_score=score
					}else{
						this.voice_score=score
					}
			           
			
					return ''
			
			
				}
			},
			scoreStatusTotalsFn(){
				return function(technology_score, service_score, voice_score) {
				     let  score
						
					score = (((technology_score + service_score + voice_score) / 3).toFixed(1))
					
				
					return score
				
				
				}
			}
		},
		
		onLoad(options) {
			
			this.createdgetSystemInfo()
			if (options.id) {


                this.serviceId=options.id
				// const decodedData = {};
				// 	for (const key in options) {
				// 		// 解码当前字段的值
				// 		const decodedValue = decodeURIComponent(options[key]);

				// 		// 将解码后的值存储到新的对象中
				// 		decodedData[key] = decodedValue;
				// 	}

				// this.serviceDetails=decodedData
				this.serviceInfoFn(options.id)

 
				// 获取评价列表
				this.serviceCommentListFn(options.id)
				if(options.orderUser){
					this.showorderBtn=true
				}else{
					this.showorderBtn=false
				}




			}

		},
		onShow() {
			this.$at.releaseKey('submit');
		},

		methods: {
			
			palyAudioFn(speech) {
			
				// innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';
				innerAudioContext.src = speech
				// 获取音频时长
				innerAudioContext.autoplay = true;
				innerAudioContext.onCanplay(() => {
					innerAudioContext.duration; // 触发以初始化
					setTimeout(() => {
						this.duration = innerAudioContext.duration.toFixed(0);
						if('Infinity'==this.duration){
							this.duration=''
						}
						console.log(innerAudioContext.duration); // 输出音频时长，单位：秒
					}, 1000); // 设置延时1秒获取
				});
				// 控制播放与暂停
				if (!this.isPaly) {
					console.log('播放');
					// 绑定播放事件
					innerAudioContext.play();
					this.isPaly = true;
					// innerAudioContext.onPlay(() => {
					// 	console.log('开始播放1');
					// 	// innerAudioContext.play();
					// 	this.isPaly = true;
					// });
				} else {
					console.log('暂停');
					// 绑定暂停事件
					innerAudioContext.pause();
					this.isPaly = false;
			
				}
			},
			viewMoreEvaluationsFn(item){
				console.log(item)
				this.$sun.navGo('/pagesB/index/allEvaluations',{uid:item.uid})
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			NavBackFn(){
				this.$sun.navBack()
			},
			imgScare(img) {
				console.log(img)
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			
			
			},
			
			async followUserFn(uid, follow) {
				const result = await this.$http.post({
					url: this.$api.followUser,
					data: {
						follow: follow == 0 ? 1 : 0,
						uid: uid
			
					},
					headers: {
						'Authorization': this.userInfo.token
					}
			
				})
				if (result.code == 0) {
					console.log(result)
					setTimeout(() => {
						this.$sun.toast(result.message, 'none')
					}, 500)
					this.$nextTick(() => {
			            this.userInfoFn(this.serviceDetails.uid)
						// this.serviceInfoFn(this.serviceId)
					})
			
			
				} else {
			
					this.$sun.toast(result.message, 'none')
				}
			
			},
			async userInfoFn(uid) {
				const res = await this.$http.post({
					url: this.$api.userInfo,
					data: {

						id: uid

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (res.code == 0) {

					this.userInfoObject = res.data
					console.log(res.data)


				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			async serviceCommentListFn(id) {
				const res = await this.$http.post({
					url: this.$api.serviceCommentList,
					data: {

						id: id,
						page: 1,
						limit: 1000

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (res.code == 0) {


					console.log(res.data.list)
					this.serviceCommentList = res.data.list





				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			async serviceInfoFn(id) {
				const res = await this.$http.post({
					url: this.$api.serviceInfo,
					data: {

						id: id

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (res.code == 0) {

					this.serviceDetails = res.data
					console.log(this.serviceDetails)

					const imgList = res.data.cover_img.split(",")
					this.listPoster = imgList.map(item => {
						return {
							img: item
						}
					})

					// 判断当前是否是搭主
					this.isHost = this.isHostFn(this.serviceDetails.uid, this.userInfo.id)
					// 获取用户详情
					this.userInfoFn(this.serviceDetails.uid)




				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},



			async addressFn(tiem) {
				console.log(tiem.dimension, tiem.longitude)
				let latMap = Number(tiem.dimension)
				let lngMap = Number(tiem.longitude)
				//纬度
				//经度
				// var longitude = parseFloat(lngMap);
				uni.openLocation({
					latitude: latMap,
					longitude: lngMap,
					success: function() {
						console.log('success');
					}
				});
				// 百度地图经纬度转腾讯地图经纬度
				// var x_pi = 3.14159265358979324;
				// var x = parseFloat(latMap) - 0.0065;
				// var y = parseFloat(lngMap) - 0.006;
				// var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				// var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				// var lat = (z * Math.cos(theta)).toFixed(7);
				// var lng = (z * Math.sin(theta)).toFixed(7);
				// //定位地方名称
				// var name = tiem.merchantAddress;
				// const map = await this.$sun.openLocation({
				// 	//拿到上面的计算好的（百度经纬度转腾讯经纬度）经纬度 进行一个赋值
				// 	lat: latMap,
				// 	lng: lngMap,
				// 	name:tiem.merchantAddress, //名称
				// 	address: tiem.merchantAddress, //地址
				// 	key: 'SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI' //腾讯key
				// });
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			isHostFn(id, uid) {

				if (id == uid) {
					return true
				} else {
					return false
				}

			},
			serviceItemsFn(id) {
				
				// this.$refs.serviceItemsPopup.show({
				// 	anim: 'bottom',
				// 	position: 'bottom',
				// 	shadeClose: false, //false使用户不能点击其它关闭页面
				// 	topclose: false,
				// 	zIndex: 99999
				// });

				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						console.log(this.form)


						const result = await this.$http.post({
							url: this.$api.placeServiceOrder,
							data: {
								id: id

							},
							headers: {
								'Authorization': this.userInfo.token
							}

						})
						if (result.code == 0) {

							this.$sun.toast(result.message, 'none')

							setTimeout(() => {
								this.$sun.navBack()
							}, 500)
                          this.$at.releaseKey('submit');


						} else {
							this.$at.releaseKey('submit');
							this.$sun.toast(result.message, 'none')
						}

						
					}
				});


			},
			// 关闭购物弹层
			closeWriteOffIcon() {
				this.$refs.serviceItemsPopup.close()
			},
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		position: relative;
		// padding: 23rpx;
		background-repeat: no-repeat;
		// background-size: cover;
		// background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-11/1b5f0202406111537307450.png');
		// width: 808rpx;
		// height: 730rpx;

         .masked {
         	position: absolute;
         	top: 0;
         	left: 0;
         	background: rgba(0, 0, 0, 0.2);
         	/* 半透明背景 */
         	pointer-events: none;
         	width: 100vw;
         	height: 724rpx;
         }

		.tape {
			position: absolute;

			right: 0rpx;
			top: 30%;
			z-index: 999;
			height: 68rpx;
			left: 580rpx;
			
			border-radius: 40rpx;
			color: #fff;
			border-radius: 40rpx 0rpx 0rpx 40rpx;

			box-shadow: inset 0rpx 2rpx 8rpx 0rpx rgb(201, 134, 255);
			background: linear-gradient(90.00deg, rgb(40, 139, 255) 4.217%, rgb(143, 84, 254) 100%);

			.playerImg {
				width: 45rpx;
				height: 45rpx;
			}

			.audio {
				margin: 0 10rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				height: 50rpx;
				width: 30%;

				.wave {
					width: 7px;
					margin: 0 2px;
					background-color: #4caf50;
					animation: audio-wave 1s infinite ease-in-out;

					&:nth-child(1) {
						animation-delay: 0.1s;
					}

					&:nth-child(2) {
						animation-delay: 0.2s;
					}

					&:nth-child(3) {
						animation-delay: 0.3s;
					}

					&:nth-child(4) {
						animation-delay: 0.4s;
					}

					&:nth-child(5) {
						animation-delay: 0.5s;
					}
				}
				.waveOne {
					width: 7px;
					margin: 0 2px;
					background-color: #4caf50;
					animation: audio-wave 1s 1 ease-in-out;
					 animation-fill-mode: both;
				
					&:nth-child(1) {
						animation-delay: 0.1s;
					}
				
					&:nth-child(2) {
						animation-delay: 0.2s;
					}
				
					&:nth-child(3) {
						animation-delay: 0.3s;
					}
				
					&:nth-child(4) {
						animation-delay: 0.4s;
					}
				
					&:nth-child(5) {
						animation-delay: 0.5s;
					}
				}
			}

			@keyframes audio-wave {
				0% {

					height: 6px;
					transform: translateY(0px);
					background: #ff8e3a;
				}

				25% {
					height: 6px;
					transform: translateY(0px);
					background: #9c73f8;
				}

				50% {
					height: 10px;
					transform: translateY(-5px) scaleY(1.5);
					background: #ed509e;
				}

				75% {
					height: 6px;
					transform: translateY(0px);
					background: #9c73f8;
				}

				100% {
					height: 6px;
					transform: translateY(0px);
					background: #0fccce;
				}
			}

		}



		.bottomLocation {
			width: 97%;
			position: absolute;
			bottom: 44rpx;
		}
		.topLocation{
			width: 97%;
			position: absolute;
			top: 0;
		}

		.img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}
          .boyBtn {
          
          	height: 34rpx;
          	padding: 0 10rpx;
          	border-radius: 100rpx;
          	color: #8c6cca;
          	background: #DCE0FD;
          
          	.genderImg {
          		margin-right: 10rpx;
          		vertical-align: middle;
          		width: 18rpx;
          		height: 18rpx;
          	}
          
          }
		.genderBtn {

			height: 34rpx;
			padding: 0 10rpx;
			border-radius: 100rpx;
			color: rgb(246, 91, 203);
			background: rgb(255, 236, 242);

			.genderImg {
				margin-right: 10rpx;
				vertical-align: middle;
				width: 18rpx;
				height: 18rpx;
			}

		}

		.followBtn {
			border-radius: 100rpx;
			width: 120rpx;
			height: 60rpx;
			color: #fff;
			background: linear-gradient(90.00deg, rgb(162, 101, 252), rgb(223, 111, 252) 100%);
		}
	
		
		.NowFollowBtn {
			border-radius: 100rpx;
			width: 120rpx;
			height: 60rpx;
			color: rgb(153, 153, 153);
			background: rgb(238, 238, 239);
		}

	}

	.serviceItemsContain {
		padding: 30rpx 30rpx 0 30rpx;
		background-color: #ececec;
		height: 50vh;
		height: auto;
		overflow-x: auto;

		.servicePersonnel {
			margin-bottom: 30rpx;
			width: 100%;

			border-radius: 20rpx;
			padding: 30rpx;
			background: rgb(255, 255, 255);

			.img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
			}

			.genderBtn {

				height: 34rpx;
				padding: 3rpx 10rpx;
				border-radius: 100rpx;
				color: rgb(246, 91, 203);
				background: rgb(255, 236, 242);

				.genderImg {
					margin-right: 10rpx;
					vertical-align: middle;
					width: 9px;
					height: 9px;
				}
			}

			.goldBtn {
				margin-left: 10rpx;
				height: 34rpx;
				padding: 3rpx 10rpx;
				border-radius: 100rpx;
				color: rgb(255, 255, 255);


				background: linear-gradient(90.00deg, rgb(250, 190, 112) 0%, rgb(250, 199, 133) 100%);

				.goldImg {
					margin-right: 10rpx;
					vertical-align: middle;
					width: 20rpx;
					height: 20rpx;
				}

			}

			.switchingServices {
				width: 174rpx;
				height: 64rpx;
				border-radius: 200rpx;
				color: rgb(102, 102, 102);
				background: rgb(247, 247, 247);
			}

			.point {
				background: rgb(68, 215, 182);
				width: 13rpx;
				height: 13rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

		}

		.makeAppointment {
			width: 856rpx;
			height: 154rpx;
			background-color: #fff;

			.makeAppointmentBtn {
				width: 232rpx;
				height: 96rpx;
				border-radius: 20rpx;
				color: #fff;
				background: linear-gradient(90.00deg, rgb(56, 144, 252) 0%, rgb(126, 92, 255) 100%);
			}
		}

		.top {
			padding: 15rpx 0;
			width: 100%;

			text {
				color: rgb(0, 0, 0);
				font-size: 36rpx;
				font-weight: 400;
			}
		}

		.content {

			width: 698rpx;
			height: auto;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: rgb(255, 242, 242);

			.positionCoupon {
				padding: 8rpx;
				width: 154rpx;
				height: 50rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: rgb(255, 0, 0);
				background: rgb(255, 219, 219);
				font-size: 24rpx;
			}

			.couponPrice {
				padding: 20rpx 26rpx;

				.left {
					margin-right: 32rpx;
				}

				.claimNow {
					width: 144rpx;
					height: 58rpx;
					border-radius: 25rpx;
					color: #fff;
					background: rgb(255, 0, 0);
				}
			}
		}

		.bottom {
			border-radius: 600rpx;
			width: 662rpx;
			height: 96rpx;
			box-shadow: 0px 4px 4px 0px rgba(28, 197, 45, 0.2);
			background: rgb(255, 0, 0);
			color: #fff;
			position: fixed;
			bottom: 20rpx;
		}
	}

	.serviceDetails {
		padding: 20rpx;



		.achievementsImg {

			height: 362rpx;
		}

		.evaluateStars {

			height: 190rpx;
			border-radius: 20rpx;
			padding: 40rpx;

			background: rgb(242, 242, 242);
		}

		.evaluateList {
			margin-bottom: 45rpx;

			.img {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}

			.detailsText {
				margin: 20rpx 0 20rpx 86rpx;
				.evaluateImg{
					width: 176rpx;
					height: 176rpx;
					// border-radius: 20rpx;
					margin-top: 10rpx;
				
				}
			}
			
		}

		.line {
			width: 2rpx;
			height: 101rpx;
			border: 2rpx solid rgb(228, 227, 227);
		}

		.addTieziBtn {
			width: 710rpx;
			height: 100rpx;

			color: #fff;
			border-radius: 130rpx;

			background: linear-gradient(90.00deg, rgb(59, 142, 252), rgb(126, 92, 255) 100%);
			position: fixed;
			bottom: 20rpx;

			z-index: 999;
		}
	}
</style>